<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./css/iptv.css">
</head>

<body>
    <h2>视频网站</h2>
    <hr/>
    <div class="card nav" group="{name:'nav',focus:'changeImg',blur:'blurImg'}" @down="cctv" @click="cardClick">
        <div isfocus class="focus-div" style="background-image: url(./img/bilibili.webp);">
            <a href="https://www.bilibili.com/"></a>
        </div>
        <div isfocus class="focus-div" style="background-image: url(./img/youtube.webp);">
            <a href="https://www.youtube.com/"></a>
        </div>
        <div isfocus class="focus-div" style="background-image: url(./img/tengxunshipin.webp);">
            <a href="https://v.qq.com/"></a>
        </div>
        <div isfocus class="focus-div" style="background-image: url(./img/iqiyi.webp);">
            <a href="https://www.iqiyi.com/"></a>
        </div>
        <div isfocus class="focus-div" style="background-image: url(./img/youku.webp);">
            <a href="https://www.youku.com/"></a>
        </div>
        <div isfocus class="focus-div" style="background-image: url(./img/mangguotv.webp);">
            <a href="https://www.mgtv.com/"></a>
        </div>
        <div isfocus class="focus-div" style="background-image: url(./img/douyin.webp);">
            <a href="https://www.douyin.com/"></a>
        </div>
        <div isfocus class="focus-div" style="background-image: url(./img/kuaishou.webp);">
            <a href="https://www.kuaishou.com/"></a>
        </div>
        <div isfocus class="focus-div" style="background-image: url(./img/douyu.webp);">
            <a href="https://www.douyu.com/"></a>
        </div>
        <div isfocus class="focus-div" id="nav-left-id">
        </div>
    </div>

    <h2>CCTV</h2>
    <hr/>
    <div class="card column cctv" group="cctv" @up="nav" @down="weishi" @click="cardClick">
        <!-- @left的作用: 在此行首个元素选中时继续按左键, 可以跳转到上面id="nav-left-id"元素 -->
        <div isfocus class="card-zhibo" @left="nav-left-id">
            <a href="https://tv.cctv.com/live/cctv1/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-1 综合</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctv2/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-2 财经</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctv3/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-3 综艺</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctv4/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-4 中文国际（亚）</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctv5/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-5 体育</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctv5plus/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-5+ 体育赛事</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctv6/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-6 电影</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctv7/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-7 国防军事</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctv8/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-8 电视剧</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctvjilu/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-9 纪录</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctv10/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-10 科教</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctv11/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-11 戏曲</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctv12/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-12 社会与法</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctv13/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-13 新闻</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctvchild/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-14 少儿</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctv15/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-15 音乐</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctv16/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-16 奥林匹克</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctv17/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-17 农业农村</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctveurope/index.shtml">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-4 中文国际（欧）</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://tv.cctv.com/live/cctvamerica/">
                <img src="./img/cctv.webp" alt="">
                <p>CCTV-4 中文国际（美）</p>
            </a>
        </div>
        <div isfocus class="card-zhibo" id="cctv-left-id">
        </div>
    </div>

    <h2>卫视</h2>
    <hr/>
    <div class="card column weishi" group="weishi" @up="cctv" @down="hebei" @click="cardClick">
        <div isfocus class="card-zhibo" @left="cctv-left-id">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002309">
                <img src="./img/beijing.webp" alt="">
                <p>北京卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002521">
                <img src="./img/jiangsu.webp" alt="">
                <p>江苏卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002483">
                <img src="./img/dongfang.webp" alt="">
                <p>东方卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002520">
                <img src="./img/zhejiang.webp" alt="">
                <p>浙江卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002475">
                <img src="./img/hunan.webp" alt="">
                <p>湖南卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002508">
                <img src="./img/hubei.webp" alt="">
                <p>湖北卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002485">
                <img src="./img/guangdong.webp" alt="">
                <p>广东卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002509">
                <img src="./img/guangxi.webp" alt="">
                <p>广西卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002498">
                <img src="./img/heilongjiang.webp" alt="">
                <p>黑龙江卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002506">
                <img src="./img/hainan.webp" alt="">
                <p>海南卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002531">
                <img src="./img/chongqing.webp" alt="">
                <p>重庆卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002481">
                <img src="./img/shenzhen.webp" alt="">
                <p>深圳卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002516">
                <img src="./img/sichuan.webp" alt="">
                <p>四川卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002525">
                <img src="./img/henan.webp" alt="">
                <p>河南卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002484">
                <img src="./img/fujiandongnan.webp" alt="">
                <p>福建东南卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002490">
                <img src="./img/fujiandongnan.webp" alt="">
                <p>贵州卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002503">
                <img src="./img/fujiandongnan.webp" alt="">
                <p>江西卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002505">
                <img src="./img/liaoning.webp" alt="">
                <p>辽宁卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002532">
                <img src="./img/anhui.webp" alt="">
                <p>安徽卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002493">
                <img src="./img/hebei.webp" alt="">
                <p>河北卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002513">
                <img src="./img/shandong.webp" alt="">
                <p>山东卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo" id="weishi-left-id">
        </div>
    </div>

    <h2>河北</h2>
    <hr/>
    <div class="card column hebei" group="hebei" @up="weishi" @click="cardClick">
        <div isfocus class="card-zhibo" @left="weishi-left-id">
            <a href="https://www.yangshipin.cn/tv/home?pid=600002493">
                <img src="./img/hebei.webp" alt="">
                <p>河北卫视</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.hebtv.com/19/19js/st/xdszb/index.shtml?index=0">
                <img src="./img/hebeijingjishenghuo.webp" alt="">
                <p>河北经济生活</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.hebtv.com/19/19js/st/xdszb/index.shtml?index=0">
                <img src="./img/hebeinongmin.webp" alt="">
                <p>河北农民</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.hebtv.com/19/19js/st/xdszb/index.shtml?index=0">
                <img src="./img/shijiazhuang.webp" alt="">
                <p>石家庄</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.hebtv.com/19/19js/st/xdszb/index.shtml?index=0">
                <img src="./img/hebeidushi.webp" alt="">
                <p>河北都市</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.hebtv.com/19/19js/st/xdszb/index.shtml?index=0">
                <img src="./img/hebeiyingshiju.webp" alt="">
                <p>河北影视剧</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.hebtv.com/19/19js/st/xdszb/index.shtml?index=0">
                <img src="./img/hebeishaoerkejiao.webp" alt="">
                <p>河北少儿科教</p>
            </a>
        </div>
        <div isfocus class="card-zhibo">
            <a href="https://www.hebtv.com/19/19js/st/xdszb/index.shtml?index=0">
                <img src="./img/hebeigonggong.webp" alt="">
                <p>河北公共</p>
            </a>
        </div>
    </div>
</body>

<script src="./js/main.js"></script>
<script src="./js/iptv.js"></script>

</html>
